<template>
  <view class="section">
    <view class="title-section mb-32 fs-18 relative flex align-item-center">
      <view class="title">公证状态:</view>
      <view>{{juZheng.status_text}}</view>
      <view class="text-blue pointer ml-8" @click="getJuZheng" title="刷新">
        <!-- 这里假设 Icon 是一个自定义组件，在 UniApp 里用合适的图标替换 -->
        <text class="fa fa-refresh"></text>
      </view>
      <view class="url-box">
        <a target="_blank" href="https://gz.51juzheng.cn/admin">管理后台</a>
      </view>
    </view>
    <view class="content">
      <view class="btn-default btn-blue" v-if="juZheng.status==-1" @click="openStartPop">开始公证</view>
      <view class="btn-default btn-blue" v-if="juZheng.status==33" @click="juZhengBook">获取聚证证书</view>
      <view class="btn-default btn-blue" v-if="juZheng.status==20" @click="juZhengQr">公证二维码</view>
    </view>

    <!-- 开始公证弹窗 -->
    <uni-popup ref="startPop" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">开始公证</view>
        <view class="mb-32">提示：请严格按照公证处要求，检查商品名称</view>
        <view class="flex">
          <view>修改商品名称：</view>
          <input v-model="product_name" placeholder="请输入商品名称" />
        </view>
        <view class="footer">
          <view class="btn cancel" @click="closeStartPop">取消</view>
          <view class="btn confirm" @click="juZhengStart">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 公证二维码弹窗 -->
    <uni-popup ref="qrPop" type="center" border-radius="20rpx 20rpx 0 0">
      <view class="uni-pop-box">
        <view class="title">公证二维码</view>
        <view class="mb-32">提示：查看该订单公证二维码</view>
        <view class="flex-x-center">
          <!-- 这里假设 vue-qr 可以替换为合适的二维码生成逻辑 -->
          <image :src="qrUrl" style="width:230rpx;height:230rpx;"></image>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="closeQrPop">取消</view>
          <view class="btn confirm" @click="closeQrPop">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { changeNor, getJuZheng, juZhengBook, juZhengQr, juZhengStart, startNotarization } from "@/api/admin";

export default {
  props: ["nowItem", "product_name"],
  data() {
    return {
      nowItem:{},
      juZheng: {},
      startShow: false,
      qrShow: false,
      qrUrl: '',
      downloadUrl: ''
    };
  },
  mounted() {
    this.getJuZheng();
  },
  methods: {
    // 状态
    getJuZheng() {
      uni.showLoading({
        title: '加载中'
      });
      getJuZheng(this.nowItem.id).then(res => {
        if (res.status === 200) {
          this.juZheng = res.data;
        }
      }).finally(() => {
        uni.hideLoading();
      });
    },
    // 开始
    juZhengStart() {
      juZhengStart(this.nowItem.id, {
        product_name: this.product_name
      }).then(res => {
        if (res.status == 200) {
          this.getJuZheng();
          uni.showToast({
            title: '开始公证成功',
            icon: 'success'
          });
          this.closeStartPop();
        }
      });
    },
    // 二维码
    juZhengQr() {
      juZhengQr(this.nowItem.id).then(res => {
        if (res.status == 200) {
          this.qrUrl = res.data.openLink;
          this.openQrPop();
        }
      });
    },
    // 证书
    juZhengBook() {
      uni.showModal({
        title: '提示',
        content: `是否下载《聚证时代公证书》？`,
        success: (res) => {
          if (res.confirm) {
            juZhengBook(this.nowItem.id).then(res => {
              if (res.status == 200) {
                this.downloadUrl = res.data.agreementInfo[0].downloadUrl;
                // 在 UniApp 中可以使用 uni.downloadFile 来处理文件下载
                uni.downloadFile({
                  url: this.downloadUrl,
                  success: (res) => {
                    if (res.statusCode === 200) {
                      uni.openDocument({
                        filePath: res.tempFilePath,
                        success: () => {
                          uni.showToast({
                            title: '证书下载成功',
                            icon: 'success'
                          });
                        }
                      });
                    }
                  }
                });
              }
            });
          }
        }
      });
    },
    // 打开开始公证弹窗
    openStartPop() {
      this.$refs.startPop.open();
    },
    // 关闭开始公证弹窗
    closeStartPop() {
      this.$refs.startPop.close();
    },
    // 打开二维码弹窗
    openQrPop() {
      this.$refs.qrPop.open();
    },
    // 关闭二维码弹窗
    closeQrPop() {
      this.$refs.qrPop.close();
    }
  }
};
</script>

<style lang="stylus" scoped>
.section {
  padding: 25px 0;
  .title-section {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #333;
  }
  .title {
    padding-left: 10px;
    border-left: 3px solid #1890FF;
    margin-right: 20px;
    font-weight: bold;
    color: #666;
  }

  .upload-box {
    height: 200px;
    border: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &:hover {
      border-color: #3399ff;
      cursor: pointer;
    }
    .tip {
      color: #999;
    }
  }
}
.url-box {
  position: absolute;
  right: 0;
  font-size: 16px;
}
.uni-pop-box {
  padding: 20rpx;
}

//.title {
//  font-size: 36rpx;
//  font-weight: bold;
//  margin-bottom: 20rpx;
//}

.mb-32 {
  margin-bottom: 32rpx;
}

.flex {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.btn {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  cursor: pointer;
}

.cancel {
  background-color: #eee;
  margin-right: 20rpx;
}

.confirm {
  background-color: #1890FF;
  color: #fff;
}
</style>